<!doctype html>
<!--
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
  <head>
    <title></title>
    <meta charset="UTF-8">
    <script src="../../tools/chai/chai.js"></script>
    <script src="../../tools/htmltest.js"></script>

    <script src="../../../webcomponents.js"></script>
  </head>
  <body>
    <x-foo>plain</x-foo>
    <button is="x-baz">plain</button>
    <script>
      var assert = chai.assert;
      window.addEventListener('WebComponentsReady', function() {
        var p = Object.create(HTMLElement.prototype);
        p.createdCallback = function() {
          this.textContent = 'custom!';
        }
        document.registerElement('x-foo', {prototype: p});
        //
        var p = Object.create(HTMLButtonElement.prototype);
        p.createdCallback = function() {
          this.textContent = 'custom!';
        }
        document.registerElement('x-baz', {prototype: p, extends: 'button'});
        document.body.appendChild(document.createElement('button', 'x-baz')).id = 'baz2';
        //
        assert.equal(document.querySelector('x-foo').textContent, 'custom!',
          'x-foo must have custom text');
        //
        assert.equal(document.querySelector('[is=x-baz]').textContent,
          'custom!', 'button is="x-baz" must have custom text');
        assert.equal(document.querySelector('#baz2').textContent, 'custom!',
          'button is=x-baz can be created via document.createElement(button, x-baz)');
        //
        var p = Object.create(HTMLElement.prototype);
        p.attachedCallback = function() {
          this.textContent = 'custom!';
        }
        //
        document.registerElement('x-zot', {prototype: p});
        //
        var xfoo = document.querySelector('x-foo');
        var root = xfoo.createShadowRoot();
        var xzot = document.createElement('x-zot');
        var handler = function() {
          assert.equal(xzot.textContent, 'custom!', 'x-zot in shadow root must have custom text');
          done();
        }
        var ob = new MutationObserver(handler);
        ob.observe(root, {childList: true, subtree: true});
        root.appendChild(xzot);
      });
    </script>
  </body>
</html>
